{{define "versionsTable"}}
<table class="table table-sm">
  <thead>
    <tr>
      <th class="col-2">Service</th>
      <th class="col-4">Version</th>
      <th>Deployed</th>
      <th class="text-center">Intended traffic</th>
      <th class="text-center">Actual traffic</th>
    </tr>
  </thead>
  <tbody>
  {{range .}}
    <tr>
      {{if .RowSpan}}
      <td rowspan="{{.RowSpan}}" class="align-middle">{{template "linkHref" .Service}}</td>
      {{end}}
      <td>{{template "linkHref" .Version}}</td>
      <td>{{template "linkHref" .Deployed}}</td>
      <td>
        <div class="text-center percent-widget" data-percent="{{.TrafficIntended}}">
          {{.TrafficIntended}}%
        </div>
      </td>
      <td>
        <div class="text-center percent-widget" data-percent="{{.TrafficReported}}">
          {{.TrafficReported}}%
        </div>
      </td>
    </tr>
  {{end}}
  </tbody>
</table>
{{end}}


{{define "content"}}

{{template "breadcrumbs" .}}

<div class="container">
  {{template "assetOverview" .Overview}}

  <div class="row">
    <div class="col">
      <div class="accordion">

        <div class="accordion-item">
          <h2 class="accordion-header" id="active-versions-heading">
            <button class="accordion-button" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#active-versions-body"
              aria-expanded="true"
              aria-controls="active-versions-body">
              Active versions
            </button>
          </h2>
          <div id="active-versions-body"
            class="accordion-collapse collapse show"
            aria-labelledby="active-versions-heading">
            <div class="accordion-body">
              {{template "versionsTable" .ActiveVersions}}
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="inactive-versions-heading">
            <button class="accordion-button collapsed" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#inactive-versions-body"
              aria-expanded="true"
              aria-controls="inactive-versions-body">
              Inactive versions
            </button>
          </h2>
          <div id="inactive-versions-body"
            class="accordion-collapse collapse"
            aria-labelledby="inactive-versions-heading">
            <div class="accordion-body">
              {{template "versionsTable" .InactiveVersions}}
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="configuration-heading">
            <button class="accordion-button collapsed" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#configuration-body"
              aria-expanded="true"
              aria-controls="configuration-body">
              Configuration
            </button>
          </h2>
          <div id="configuration-body"
            class="accordion-collapse collapse"
            aria-labelledby="configuration-heading">
            <div class="accordion-body">
              <b>TODO</b>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="history-log-heading">
            <button class="accordion-button" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#history-log-body"
              aria-expanded="true"
              aria-controls="history-log-body">
              History of actuations
            </button>
          </h2>
          <div id="history-log-body"
            class="accordion-collapse collapse show"
            aria-labelledby="history-log-heading">
            <div class="accordion-body">
              {{template "historyListing" .History}}
              {{if .LikelyMoreHistory}}
              <ul class="pagination pagination-sm justify-content-center">
                  <li class="page-item">
                    <a class="page-link" href="{{.HistoryHref}}">View all history</a>
                  </li>
              </ul>
              {{end}}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>

{{end}}
